import React from 'react';
import {
  Text, View, ScrollView, ImageBackground, SafeAreaView,
  Dimensions, StatusBar, Animated, FlatList,
  TouchableOpacity,
 } from 'react-native';
import { WhiteSpace, WingBlank, Flex, Button, Drawer, List, Popover } from '@ant-design/react-native';
import styles from './styles';
import { Ionicons, Entypo } from '@expo/vector-icons';
// import { useCollapsibleHeader } from 'react-navigation-collapsible';
import { withCollapsible } from "react-navigation-collapsible";
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
import bg from '../../../assets/bg.jpeg';

const screenWidth = Dimensions.get('screen').width;

const createRow = (onPress) => ({ item }) => (
  <TouchableOpacity
    onPress={onPress}
    style={{
      width: '100%',
      height: 50,
      alignItems: 'center',
      justifyContent: 'center',
      borderBottomColor: 'gray',
      borderBottomWidth: 1,
    }}>
    <Text
      style={{
        fontSize: 22,
      }}>
      {item}
    </Text>
  </TouchableOpacity>
);

const Nav = ({ navigation, collapsible }) => {

  const buildArray = (len) => {
// Array(5) gives you an array with length 5 but no values, hence you can't iterate over it.
// Array.apply(null, Array(5)).map(function () {}) gives you an array with length 5 and undefined as values, now it can be iterated over.
// Array.apply(null, Array(5)).map(function (x, i) { return i; }) gives you an array with length 5 and values 0,1,2,3,4.
// Array(5).forEach(alert) does nothing, Array.apply(null, Array(5)).forEach(alert) gives you 5 alerts
// ES6 gives us Array.from so now you can also use Array.from(Array(5)).forEach(alert)
// If you want to initialize with a certain value, these are good to knows...
// Array.from('abcde'), Array.from('x'.repeat(5))
// or Array.from({length: 5}, (v, i) => i)   // gives [0, 1, 2, 3, 4]
    return Array.from(Array(len));
  }
  const listItems = () => {
    const arr = buildArray(15);
    return arr.map((item, index) => {
      // console.log('111111', `ITEM - ${index}`);
      return (
        <View key={`key${index}`} style={styles.itemContainer}><Text>{`ITEM - ${index}`}</Text></View>
      )
    });
  }
  // const onScroll = (e) => {
  //   console.log('-->> ', e.nativeEvent.contentOffset.y);
  //   // e.nativeEvent
  //   const tmpEvent = {
  //     "contentInset": {
  //       "bottom": 0,
  //       "left": 0,
  //       "right": 0,
  //       "top": 0,
  //     },
  //     "contentOffset": {
  //       "x": 0,
  //       "y": 396.6666666666667,
  //     },
  //     "contentSize": {
  //       "height": 1640,
  //       "width": 390,
  //     },
  //     "layoutMeasurement": {
  //       "height": 753,
  //       "width": 390,
  //     },
  //     "zoomScale": 1,
  //   };
  // }
  // const content1 = () => (
  //   <ScrollView
  //     style={styles.cnbContainer}
  //     contentContainerStyle={styles.contentContainer}
  //     contentInsetAdjustmentBehavior="automatic"
  //     onScroll={onScroll}
  //     scrollEventThrottle={30}
  //   >
  //     <ImageBackground source={bg} style={styles.cnbBgImage} />
  //     {listItems()}
  //   </ScrollView>
  // );

  const data = [];
  for (let i = 0; i < 100; i++) {
    data.push(i);
  }
  // const {
  //   onScroll,
  //   // onScrollWithListener,
  //   containerPaddingTop,
  //   scrollIndicatorInsetTop,
  // } = useCollapsibleHeader({
  //   navigationOptions: {
  //     headerStyle: {
  //       backgroundColor: 'green',
  //       // height: 150,
  //     },
  //   },
  //   config: {
  //     collapsedColor: 'red',
  //   },
  // });
  // const content2 = () => {
  //   return (
  //     <Animated.FlatList
  //       data={listItems}
  //       onScroll={onScroll}
  //       contentContainerStyle={{ paddingTop: containerPaddingTop }}
  //       scrollIndicatorInsets={{ top: scrollIndicatorInsetTop }}
  //       renderItem={createRow(() => navigation.navigate('Detail'))}
  //       keyExtractor={(item) => item.toString()}
  //     />
  //   )
  // }
  const { paddingHeight, animatedY, onScroll } = collapsible;
  console.log(paddingHeight, animatedY, onScroll);
  const content3 = () => {
    return (
      // <AnimatedFlatList
      //   //...
      //   contentContainerStyle={{ paddingTop: paddingHeight }}
      //   scrollIndicatorInsets={{ top: paddingHeight }}
      //   _mustAddThis={animatedY}
      //   onScroll={onScroll}
      // />
      <>
      <ImageBackground source={bg} style={styles.cnbBgImage} />
      <Animated.FlatList
        data={data}
        onScroll={onScroll}
        contentContainerStyle={{ paddingTop: paddingHeight }}
        scrollIndicatorInsets={{ top: paddingHeight }}
        renderItem={createRow(() => navigation.navigate('Detail'))}
        // keyExtractor={(item) => item.toString()}
        _mustAddThis={animatedY}
      />
      </>
    );
  }
  return (
    content3()
  );
};

export default withCollapsible(Nav, { iOSCollapsedColor: "#031" });
